<template>
    <view class="info-main">
        <view class="use-msg">
            <view class="use-msg-top row">
                <view class="row">
                    <view style="color: #fff; font-size: 36rpx; font-weight: bold">使用情况</view>
                </view>
                <view class="row" @click="goto('/pagesWater/extension/usage')">
                    <text style="color: #fff">查看详情</text>
                    <uni-icons type="right" color="#fff" size="18"></uni-icons>
                </view>
            </view>
            <view class="num-msg">
                <view>
                    <view class="num-msg-title">{{ numObj.freeQueryNum == "-1" ? "无限" : numObj.freeQueryNum || '-'
                    }}次</view>
                    <view class="txt-num">总次数</view>
                </view>
                <view>
                    <view class="num-msg-title">{{ numObj.usedQueryNum || '-' }}次</view>
                    <view class="txt-num">已使用</view>
                </view>
                <view>
                    <view class="num-msg-title">{{
                        numObj.availQueryNum == "-1" ? "无限" : numObj.availQueryNum || '-'
                    }}次</view>
                    <view class="txt-num">可用</view>
                </view>
            </view>
            <view class="row" style="margin-top: 35rpx">
                <view style="color: #fff">
                    <view style="margin-bottom: 8rpx">推广增加查询次数</view>
                    <view>可以无限叠加使用</view>
                </view>
                <view class="levelUp" @click="goto('/pagesWater/extension/extension')">推广得查询次数</view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getTaxQueryShareNumberApi } from "@/api/user";
export default {
    data() {
        return {
            numObj: {},
            showShare: true
        }

    },
    computed: mapGetters(["isLogin"]),
    created() {
        if (!this.isLogin) return
        this.getInfo();
    },
    methods: {
        goto(url) {
            if (!this.isLogin) return this.$emit('goLogin')
            uni.navigateTo({
                url
            })
        },
        getInfo() {
            getTaxQueryShareNumberApi().then((res) => {
                this.numObj = res.data;
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.num-msg-title {
    font-weight: bold;
    color: #fff;
}

.info-main {
    background-color: #488afd;
    margin:50rpx 30rpx 0;
    border-radius: 24rpx;
}

.levelUp {
    width: 240rpx;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 34rpx;
    background-color: #fff;
    color: #488afd;
    text-align: center;

}

.use-msg {
    //text-align: center;
    width: 93%;
    margin: 0 30rpx;
    padding: 30rpx;
    //background: linear-gradient( 134deg, #C6DAF8 0%, #DFEDFB 100%);
    border-radius: 24rpx;
    position: relative;
    z-index: 9;

    //opacity: 0.2;
    .use-msg-top {
        display: flex;
        align-items: center;

        .use-icon {
            width: 40rpx;
            height: 50rpx;
            margin-right: 20rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .num-msg {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;

        >view {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #689CF8;
            width: 30%;
            height: 120rpx;
            border-radius: 16rpx;
            text-align: center;

            .txt-num {
                font-weight: 400;
                font-size: 24rpx;
                color: #fff;
            }
        }
    }
}
</style>